import {designComponent} from "plain-design-composition";
import {PlIcon} from "plain-design";
import React from "react";

export const DataStatisticHead = designComponent({
    props: {
        icon: {type: String, required: true},
        title: {type: String, required: true},
    },
    slots: [
        'default',
    ],
    setup({props, slots}) {
        return () => (
            <div className="pro-data-statistic-head">
                <div className="pro-data-statistic-head-icon pl-text-primary">
                    <div className="pro-data-statistic-head-icon-background pl-background-primary"/>
                    <PlIcon icon={props.icon}/>
                </div>
                <span>{props.title}</span>
                <div className="pro-data-statistic-head-space"/>
                {slots.default()}
            </div>
        )
    },
})